import React from "react"
const Order = () => {

    const busid = React.Business.id
    const [page, setPage] = React.useState(1)
    const [limit, setLimit] = React.useState(10)
    const [status, setStatus] = React.useState("")
    const [hasMore, setHasMore] = React.useState(true)
    const [order, setOrder] = React.useState([])

    // 下拉刷新
    const onRefresh = async () => {
        setHasMore(true)
        setPage(1)
        setOrder([])
        loadMore()
    }

    // 上拉加载
    const loadMore = async () => {
        const data = {
            page,limit,busid,status
        }
        data.status = status
        let result = await React.HTTP.post("/order/index", { page, limit, status, busid })
        if (result.code == 1) {
            setHasMore(true)
            setPage(page + 1)
            setOrder(order.concat(result.data))
        } else {
            setHasMore(false)
            return false
        }
    }
    // 标签列表
    const [tagList,setTagList] = React.useState([
        {title:"全部",key:"all"},
        {title:"待付款",key:"0"},
        {title:"已付款",key:"1"},
        {title:"已入住",key:"2"},
        {title:"已完成",key:"3"},
        {title:"申请退款",key:"-1"},
    ])

    const changeTag = (val:string)=>{
        val=="all"?setStatus(""):setStatus(val)
        onRefresh()
    }
    const back = () => {
        React.navigate(-1)
    }

    const refund = async (item:any,e:any) => {
        let dialog = await React.UI.Dialog.confirm({
            content: '确定要删除吗？',
        })
        if(!dialog){
            return false
        }
        const data = {
            orderid:item.id
        }
        let result = await React.HTTP.post("/order/refund",data)
        if(result.code == 1){
            React.success(result.msg,()=>{
                onRefresh()
            })
        }else{
            React.error(result.msg)
        }
    }

    const buttomList = (item:any) => {
        if(item.status == "0"){
            return (<React.UI.Button color='primary' fill='solid' size="small">去支付</React.UI.Button>) 
        }else if(item.status == "1"){
            return (<React.UI.Button color='danger' fill='solid' size="small" onClick={refund.bind(this,item)}>申请退款</React.UI.Button>)
        }else if(item.status == "3" && (!item.comment && !item.rate)){
            return (<React.UI.Button color='success' size='small' onClick={()=>React.navigate("/business/comment?orderid="+item.id)}>立即评价</React.UI.Button>)
        }
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/order.css" />
            {/* 导航  */}
            <React.UI.NavBar
                onBack={back}
                style={{ background: `rgb(55, 68, 134)`, color: '#fff' }}
            >
                我的订单
            </React.UI.NavBar>
            <React.UI.Tabs defaultActiveKey="all" onChange={changeTag}>
                {tagList.map((item:any)=><React.UI.Tabs.Tab title={item.title} key={item.key} />)}
            </React.UI.Tabs>
            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="order_list">
                    {
                        order.map((item: any) =>
                            <div className="item" key={item.id}>
                                <div className="item_top">
                                    <p>{item.room.name}</p>
                                    <div className="top_tag">{item.status_text}</div>
                                </div>
                                <div className="house">
                                    <div className="item_swipers">
                                        <img src={item.room.thumb_text} alt="" />
                                    </div>
                                    <div className="item_times">
                                        <div>
                                            <div>{item.starttime_text}</div>
                                            <div>{item.starttime_week}</div>
                                        </div>
                                        <div>
                                            <div>共{item.day_num}晚</div>
                                            <div className="item_right">
                                                <img src="/assets/images/right1.png" alt="" />
                                            </div>
                                        </div>
                                        <div>
                                            <div>{item.endtime_text}</div>
                                            <div>{item.endtime_week}</div>
                                        </div>
                                        <div>
                                            <div className="item_pay">订单总价</div>
                                            <div className="item_price">￥{item.price}</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="item_bar">
                                    {buttomList(item)}
                                    <React.UI.Button color='warning' size='small' onClick={()=>React.navigate("/business/orderInfo?orderid="+item.id)}>订单详细</React.UI.Button>
                                </div>
                            </div>
                        )
                    }
                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>

        </>
    )
}

export default Order